//工具条功能块
<template>
<div class="fun-block" @click='action' :class='blockType'>
    <span class="iconfont icon" :class='icon'></span>
    <span class="title">
        {{title}}
    </span>
</div>
</template>

<script lang='ts'>
import {Component, Prop, Emit, Vue, Watch} from 'vue-property-decorator'

@Component({})
export default class funBLock extends Vue{
    name:string = 'funBlock'

    @Prop()                                 //icon
    icon:string

    @Prop()                                 //名称
    title:string
    
    @Prop()                                 //识别标记
     peg:string | number

    @Prop()                                 //组件类型
    type:string
    

    typeConf = {

        default: {
            class: '',
            fun (){}
        },

        action: {
            class: 'action',
            fun (){}
        }
        
    }

    // 状态函数, 根据状态调用对应的函数
    get blockType():string{
        let key = this.type;
        let type = this.typeConf[key];
        
        type =  key && type ? type : this.typeConf['default']
        type.fun()
        
        return type.class
    }
    
    
    action (){
        this.$emit('funAction', this.peg)
    }

}

</script>

<style scoped lang='scss'>

.fun-block{
    @extend %flex_center;
    
    $size: _rem(40px);
    box-sizing: border-box;
    position: relative;
    width: $size;
    height: $size;
    border-radius:  _rem(4px);
    text-align: center;
    user-select: none;
    transition:  $transition_time_q;

    .icon{
        opacity: 1;
        font-size: _rem(20px);
    }
    
    .title{
        @extend %position_center;
        opacity: 0;
        box-sizing: border-box;
        padding: _rem(2px);    
        font-size: _rem(12px); 
        z-index: 2;  
    }

    .icon,
    .title{
        transition:  all $transition_time;
    }

    &:hover{
        
        box-shadow: $default_shadow;
        transform: translateY(-2px);
        
        .icon{
            opacity: 0;
        }

        .title{
            opacity: 1;
        }
    }
    
}

.fun-block.action{
    background: $main_color;
    color: #fff;
}



</style>